<template>
  <div class="detail-container">
    <div class="header">
      <span class="header-title">设备选择：</span>
      <el-select v-model="selectDeviceId" placeholder="请选择设备" clearable :style="{ width: '100%' }" size="small" width="300" @change="handleSelect">
        <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId"></el-option>
      </el-select>
    </div>
    <el-card class="card-table">
      <fault-record :data="deviceFaultList" />
    </el-card>
    <el-card class="card-table">
      <run-state-record :id="selectDeviceId" />
    </el-card>
    <div class="graph">
      <el-card>
        <pressure-graph :id="selectDeviceId" />
      </el-card>
      <el-card>
        <temperature-graph :id="selectDeviceId" />
      </el-card>
    </div>
  </div>
</template>

<script>
import PressureGraph from "../dashboard/PressureGraph.vue";
import TemperatureGraph from "../dashboard/TemperatureGraph.vue";
import FaultRecord from "../dashboard/FaultRecord.vue";
import RunStateRecord from "../dashboard/RunStateRecord.vue";
import { getDeviceFaultApi, getDeviceListApi, getFaultListApi } from "@/api/deviceApi";
import dayjs from "dayjs";

const TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
export default {
  data() {
    return {
      selectDeviceId: "",
      deviceList: [],
      deviceFaultList: [],
      deviceDetail: {},
    };
  },
  mounted() {
    const { id } = this.$route.query;
    this.handleGetDeviceList();

    if (id) {
      this.selectDeviceId = id;
      this.handleFaultDeviceList(id);
    } else {
      this.handleGetAllDeviceFault();
    }
  },
  methods: {
    handleSelect(id) {
      if (id) {
        this.handleFaultDeviceList(id);
      } else {
        this.handleGetAllDeviceFault();
      }
    },

    async handleGetAllDeviceFault() {
      const data = await getFaultListApi();
      console.log(data, "所有故障信息");
      if (data && data.length) {
        const list = data.map((item) => {
          const date = dayjs(item.faultTime);
          const formattedDate = date.format(TIME_FORMAT);
          return {
            ...item,
            faultTime: formattedDate,
          };
        });
        this.deviceFaultList = list;
      } else {
        this.deviceFaultList = [];
      }
    },

    async handleGetDeviceList() {
      const data = await getDeviceListApi();
      this.deviceList = data || [];
    },
    async handleFaultDeviceList(id) {
      const data = await getDeviceFaultApi(id);
      console.log(data, "单台机器的故障信息");
      if (data && data.length) {
        const list = data.map((item) => {
          const date = dayjs(item.faultTime);
          const formattedDate = date.format(TIME_FORMAT);
          return {
            ...item,
            faultTime: formattedDate,
          };
        });
        this.deviceFaultList = list;
      } else {
        this.deviceFaultList = [];
      }
    },
  },
  components: {
    PressureGraph,
    TemperatureGraph,
    FaultRecord,
    RunStateRecord,
  },
};
</script>

<style lang="less" scoped>
@import "./DeviceDetail.less";
</style>
